<template>
  <div>
    <Form :model="searchData" :label-width="60">
      <Row :gutter="18">
        <i-col span="6">
          <FormItem label="商品货号">
            <Input v-model="searchData.articleNumber" @on-enter="search"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="商品标题">
            <Input v-model="searchData.title" @on-enter="search"/>
          </FormItem>
        </i-col>
        <Button type="primary" @click="search">检索</Button>
      </Row>
      <Row :gutter="18">
        <i-col span="6">
          <FormItem label="日期查询">
            <DatePicker @on-change="dateChange" type="daterange" :options="dateOptions" placement="bottom-start" placeholder="根据日期查询"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="状态查询">
            <Select v-model="searchData.status" clearable @on-change="search">
              <Option value="0">待审核</Option>
              <Option value="1">已上架</Option>
              <Option value="2">已下架</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="商品标签">
            <Select v-model="searchData.labelId" clearable @on-change="search">
              <Option v-for="label in labels" :key="label.id" :value="label.id">{{label.label}}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="商品分类">
            <Select v-model="searchData.categoryId" clearable @on-change="search">
              <i-option v-for="item in classifyTree" :value="item.id" :key="item.id">
                <span :class="{childItem: item.parentId}"></span>{{ item.name }}
              </i-option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div>
      当前检索条件：
      <Tag v-for="(t, index) in nowSearch" :key="index" closable @on-close="closeTag(t)" color="blue">{{ searchStr[t] }}</Tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-search',
  data () {
    return {
      url: {
        selectUrl: '/goods/manage/get/category/unit/label/list'
      },
      labels: [],
      classifyTree: [],
      searchData: {
        articleNumber: '',
        labelId: 0,
        title: '',
        categoryId: 0,
        status: null,
        gmtCreate: 0,
        specTime: 0
      },
      dateOptions: {
        shortcuts: [
          {
            text: '两天内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              return [start, end]
            }
          },
          {
            text: '一周内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '一个月内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          }
        ]
      },
      nowSearch: [],
      searchStr: ['货号', '标签', '商品标题', '分类', '状态', '时间']
    }
  },
  methods: {
    dateChange (date) {
      this.searchData.gmtCreate = new Date(date[0]).valueOf()
      this.searchData.specTime = new Date(date[1]).valueOf() + 24 * 3600 * 1000 - 1
      this.search()
    },
    search () {
      let data = this.getNotNull()
      if (this.nowSearch[0] || this.nowSearch[0] === 0) {
        this.$emit('search', data)
      } else {
        this.$emit('getAll')
      }
    },
    getNotNull () {
      let count = 0
      let result = {}
      this.nowSearch = []
      for (let i in this.searchData) {
        if (this.searchData[i] || this.searchData.status === 0) {
          result[i] = this.searchData[i]
          this.nowSearch.push(count)
        }
        count++
      }
      if (this.nowSearch.indexOf(6) !== -1) {
        this.nowSearch.splice(this.nowSearch.indexOf(6), 1)
      }
      return result
    },
    closeTag (t) {
      let count = 0
      for (let i in this.searchData) {
        if (t === count) {
          this.searchData[i] = null
        }
        count++
      }
      this.search()
    }
  },
  created () {
    this.$ajax.get(this.url.selectUrl).then(res => {
      this.labels = res.data.data.goodsLabelList
      res.data.data.goodsCategoryTreeList.forEach((item, index) => {
        this.classifyTree.push(item)
        this.classifyTree.push(...item.childCategoryList)
      })
    })
  }
}
</script>

<style scoped>
  .childItem{
    padding-left: 10px;
  }
</style>
